<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
		        <!-- 子组件上定义ref属性 -->
		        <child ref="myChild"></child>
		        <button @click="handleClick">获取子组件</button>
		    </div>
		    <script>
		        Vue.component("child",{
		            template:`<div>child</div>`,
		            data(){
		                return{
		                    msg:"哈哈"
		                }
		            }
		        })
		        //根组件
		        var vm = new Vue({
		            el:"#box",
		            methods:{
		                handleClick(){
		                    //通过this.$refs属性可以直接获取子组件对象
		                    console.log(this.$refs.myChild.msg)
		                }
		            }
		        })
		    </script>
	</body>
</html>
